<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/toastr.css" rel="stylesheet">
    <link href="../static/css/3d.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/js/toastr.min.js"></script>
    <script type="text/javascript" src="../static/js/reason.js"></script>
    <script type="text/javascript" src="../static/js/fq.js"></script>

</head>
<body class="text-center">
<div id="snowFlow"></div>
<div class="   panel panel-primary center-block "
     style="width: 25%; position: relative;top: 30%;transform:translateY(-50%);  min-width:400px; height:200px;">
    <div class="panel-heading text-center">
        <h5 class="panel-title">故障事件推理</h5>
    </div>
    <div class=" panel-body " style="position: relative;top: 30%;transform:translateY(-50%);  ">
        <select class="center-block  form-control" id="select">
            <option value="0">请选择您将要推理的事件</option>
        </select>
    </div>
    <div class="panel-footer" style="position: relative;top: 27%;transform:translateY(0%);  ">
        <span>T</span>:顶事件 <span>M</span>:中间事件 <span>X</span>:底事件
    </div>
</div>

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:30%">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title">推理结果</h4>
                <div class="alert alert-warning ">
                    <a href="#" class="close" data-dismiss="alert">
                    </a>
                    <strong>敬告！</strong>推理结果由您的知识库决定！！！
                </div>
            </div>
            <div class="modal-body text-left">
                <div>
                    <span class="label label-primary">导致发生的事件：</span>
                    <div id="ev_x" style="height: 100px;min-width:200px;overflow:scroll;">
                    </div>
                    {#                    <table class="table table-condensed">#}
                    {#                        <tbody>#}
                    {#                        <tr>123</tr>#}
                    {#                        <tr>123</tr>#}
                    {#                        <tr>123</tr>#}
                    {#                        <tr>123</tr>#}
                    {#                        </tbody>#}
                    {#                    </table>#}
                </div>
                <div>
                    <span class="label label-danger">导致发生事件的可能原因：</span>
                    <div id="ev_m" style="height: 200px;min-width:200px;overflow:scroll;">
                    </div>
                    {#                    <table class="table table-condensed">#}
                    {#                    </table>#}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>

    </div>
</div>

</body>
<script>

    window.onload = function () {
        snowFlow();

        function snowFlow(left, height, src) {
            var container = document.createElement('div');
            var pic = document.createElement('img');
            var snowFlow = document.getElementById('snowFlow');
            pic.className = 'pic';
            container.className = 'container';
            snowFlow.appendChild(container);
            container.appendChild(pic);
            container.style.left = left + 'px';
            container.style.height = height + 'px';
            pic.src = '../static/img/snow.png';
            setTimeout(function () {
                snowFlow.removeChild(container);
            }, 5000);
        }

        setInterval(function () {
            var left = Math.random() * window.innerWidth;
            var height = Math.random() * window.innerHeight;
            var src = '../static/img/snow.png';
            snowFlow(left, height, src);
        }, 500)
    }

</script>
</html>